<template>
  <div>
<h3>国际新闻({{ this.$route.query.id}})</h3>
<!-- 国内新闻的总区域  -->
<div class="eveny">
   <div class="center"> 
     <!-- 各省的关注  -->

  <!-- 省会内容总区域  -->
     <div class="shenghui">
      <!-- 省会区域 -->
 <div class="small" v-for="(item,index) in list" :key="index"  @click="newdetail(item.newsTitle)">
  
<!-- 原点区域 -->
<div class="left">
  <div class="yuan"></div>
</div>
<!-- 内容区域 -->
<div class="right">
 {{item.newsTitle}} 

</div>
     </div>
</div>
</div>
  </div>
  </div>
</template>

<script>
import {newsType} from "@/api/index"
export default {
  data(){
 return {
list:[],

}
},
 //各省会发送请求的
 mounted(){
  newsType(this.$route.query.id).then((res)=>{
    if(res.data.code==200){
      this.list=res.data.rows
    }
  })
},

  methods:{
    //新闻详情
    newdetail(id){
      this.$router.push({path:"/newsthree/newsdetail",query:{id}})
// console.log(id);
    }
  }

}
</script>

<style scoped>
 h3{
height: .4rem;
 font-size:.22rem;
 color: #5c5d7b;
 line-height: .4rem;
 padding-left: .15rem;
 
}
/* 各省商会的总区域 */
.eveny{
 
  display: flex;
  justify-content: center;

}
/* 版心区域 */
.center{
  width: 95%;
 background-color: white;
 border-radius: .1rem;
}
/* 关注各省的标题 */
.guan{
  height: .4rem;
  text-align: center;
  line-height: .4rem;
  font-size: 20px;

}
/* 省会总区域 */
.shenghui{
  width: 100%;
 
}
/* 省会区域 */
.small{
width: 100%;
height: .2rem;
display: flex;
margin-top: .03rem;
margin-bottom: .07rem;

}
/* 原点区域 */
.left{
width: 5.5%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-left: .1rem;

}
.yuan{
width: 15px;
height: 15px;
border-radius: 50%;
background-color: black;
}
/* 内容区域 */
.right{
width: 94%;
height: 100%;
padding-left: .05rem; 
font-weight: 700;
}
</style>